<template>
    <div class="car">
        <h2> 品牌：{{ car.brand }}</h2>
        <h2> 价格：{{ car.price }}</h2>
        <button @click="changPrice">修改汽车价格</button>
        <button @click="changCar">修改汽车</button>

        <h2> 品牌：{{ boat.name }}</h2>
        <h2> 价格：{{ boat.price }}</h2>
        <button @click="changBoat">修改船</button>

        <h2>游戏列表:
            <ul>
                <li v-for="g in games" :key="g.id">
                    {{ g.id }}:{{ g.name }}
                </li>
            </ul>
        </h2>
        <button @click="changeGameName">修改第一个游戏的名字</button>

    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"

let car = reactive({ brand: '奔驰', price: 1000 })
let boat = ref({ name: '小船', price: 4000 })
let games = reactive([
    { id: 1, name: 'pubg' },
    { id: 2, name: '联盟' },
    { id: 3, name: 'lol' }
])

function changPrice() {
    car.price += 1000
}

function changeGameName() {
    games[0].name = '摩尔庄园'
}


function changCar() {
    /* Object.assign可以修改 reactive 包的对象 */
    Object.assign(car, { brand: '摩托', price: 200 })
}

function changBoat() {
    // boat.value.name = '大船',
    // boat.value.price = 9000

    boat.value = { name: '超大船', price: 9000 }
}
</script>

<style lang="scss" scoped>
.car {
    background-color: gray;
    box-shadow: 0 0 10 px;
    border-radius: 10px;
    color: white;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>
